<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>
    <div id="root">
        <!--v-model.trim过滤输入框中前后输入的空格-->
        <input type="hidden" v-model="student.id" />
        账号：<input type="text" v-model.trim="student.account" /><br /><br />
        密码：<input type="password" v-model.trim="student.password" /><br /><br />
        <!--v-model.number可以控制输入的内容为数字-->
        <!-- 年龄：<input type="number" v-model.number="student.age" /><br /><br /> -->
        性别： 男:<input type="radio" name="sex" v-model="student.sex" value="男" />
        女:<input type="radio" name="sex" v-model="student.sex" value="女" /><br /><br />
        爱好： 学习<input type="checkbox" v-model="student.hobby" value="学习" />
        打游戏<input type="checkbox" v-model="student.hobby" value="打游戏" />
        睡觉<input type="checkbox" v-model="student.hobby" value="睡觉" /><br /><br />
        校区：
        <select v-model="student.address">
            <option value="">----请选择校区----</option>
            <option value="贺兰山校区">贺兰山校区</option>
            <option value="文萃校区">文萃校区</option>
            <option value="南校区">南校区</option>
            <option value="怀远校区">怀远校区</option>
        </select><br /><br />
        其它信息：
        <!--v-model.lazy: 不会实时收集。当失去焦点时才会收集。不写lazy，当内容变化时就会收集-->
        <textarea cols="30" rows="5" v-model.lazy="student.info"></textarea><br /><br />
        <input type="checkbox" v-model="ischeck" />接受并阅读<a href="http://www.baidu.com">《用户协议》
        </a><br /><br />
        <button @click="addInfo">提交</button>
    </div>
    <script>
        const app = Vue.createApp({
            setup() {
                let student = Vue.ref({
                    account: "",
                    password: "",
                    sex: "男",
                    hobby: [],
                    address: "",
                    info: ""
                });
                let ID = null;
                let ischeck = Vue.ref(false)
                function addInfo() {

                    if (!ischeck.value) {
                        alert("请阅读并同意用户协议")
                        return
                    }
                    console.log(JSON.stringify(student.value));

                    $.ajax({
                        url: "http://127.0.0.1:8080/insert/" + ID,
                        type: "PUT",
                        data: JSON.stringify(student.value),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success(result) {
                            alert(result.message)
                            console.log(result);
                            window.open("http://127.0.0.1:5500/2.html")
                        },
                        error(res) {
                            console.log(res);
                        }
                    });
                }

                function getOne() {
                    ID = window.localStorage.getItem("id");
                    $.ajax({
                        url: "http://127.0.0.1:8080/getOne",
                        type: "GET",
                        data: { "id": ID },
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success(res) {
                            console.log(res);
                            student.value = res.data;
                            student.id = ID;
                            localStorage.removeItem("id");
                        }
                    })

                }
                if (localStorage.getItem("id") != null) {
                    getOne();
                }
                return { student, addInfo, ischeck };
            },
        }).mount("#root")

    </script>
</body>

</html>